<!DOCTYPE html>
<html lang="en" ng-app="orp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="lib/angularjs/angular.js"></script>
    <script src="lib/angularjs/angular-sanitize.min.js"></script>
    <script src="lib/jquery-1.12.1.min.js"></script>
    <script src="lib/bootstrap/bootstrap.min.js"></script>
    <script src="lib/highchart/highcharts.js"></script>
    <script src="lib/highchart/themes/grid-light.js"></script>
    <script src="lib/bootstrap-treeview/bootstrap-treeview.min.js"></script>
    <script src="lib/slide-reveal/jquery.slidereveal.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap-select/css/bootstrap-select.css">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap-treeview/bootstrap-treeview.min.css"/>
    <link rel="stylesheet/less" type="text/css" href="stylesheets/style.less"/>
    <script src="lib/less.js" type="text/javascript"></script>
    <script src="javascript/app.js"></script>
    <script src="javascript/services/layoutService.js"></script>
    <script src="javascript/services/draggingService.js"></script>
    <script src="javascript/directive/layout.js"></script>
    <script src="javascript/directive/dragging.js"></script>
    <script src="javascript/controller/index.js"></script>
    <script src="javascript/controller/dashboard.js"></script>
    <title></title>
</head>
<body ng-controller="orpController" ng-class="displayMode" client>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#navbar-collapsed"
                    aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">NRP</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapsed">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#dashboardPane" aria-controls="dashboardPane" role="tab" data-toggle="tab">Dashboard</a>
                </li>
                <li><a href="#dashboardPane" aria-controls="dashboardPane" role="tab" data-toggle="tab">Report
                    Builder</a></li>
                <li><a href="#dashboardPane" aria-controls="dashboardPane" role="tab" data-toggle="tab">Reports</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user" style="padding-right: 15px"></span>Joann</a></li>
            </ul>
        </div>
    </div>
</nav>
<div id="dashboardPane" class="client" ng-controller="dashboardController">
    <div class="frame frame-default col-sm-3"
         ng-show="dashboard.isEditing"
         stack="stretch">
        <div class="panel panel-default" stack="stretch">
            <div class="panel-heading">Control Panel</div>
            <div class="panel-body">
                <div id="dsTree" dragging="treeview"></div>
            </div>
        </div>
    </div>
    <div class="frame frame-primary" ng-class="dashboard.isEditing ? 'col-sm-9' : 'col-sm-12'" stack="stretch">
        <div>
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#dashboard01" aria-controls="dashboard01" role="tab" data-toggle="tab">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        New Dashboard
                    </a>
                </li>
                <li role="presentation">
                    <a href="#dashboard02" aria-controls="dashboard02" role="tab" data-toggle="tab">New Dashboard 1</a>
                </li>
                <li role="presentation"  class="config pull-right">
                    <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        <span class="glyphicon glyphicon-cog"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li ng-show="!dashboard.isEditing"><a href="#" ng-click="dashboard.edit()">Edit Dashboard</a>
                        </li>
                        <li ng-show="dashboard.isEditing"><a href="#" ng-click="dashboard.save()">Save Dashboard</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="tab-content" stack="stretch">
            <div role="tabpanel" class="tab-pane active" id="dashboard01" stack="stretch">
                <div class="panel panel-default dashboard" stack="stretch">
                    <div class="panel-body">
                        <div ng-hide="!dashboard.isEditing" class="col-sm-12 create-frame">
                            <span>CREATE NEW CHARTS</span>
                        </div>
                        <div class="col-sm-12" ng-class="{'db-frame': dashboard.isEditing}">
                            <h3>THIS IS SOME REPORT.</h3>

                            <p>Introduction: This is a report with chart. This is a report with chart. This is a report
                                with
                                chart. This is a report with chart. This is a report with chart. This is a report with
                                chart. This is a report with chart. This is a report with chart.This is a report with
                                chart.
                                This is a report with chart. This is a report with chart. This is a report with chart.
                                This
                                is a report with chart. This is a report with chart. This is a report with chart. This
                                is a
                                report with chart.</p>

                            <p>Usage: No usage provided now</p>
                        </div>
                        <div class="col-sm-12" ng-class="{'db-frame': dashboard.isEditing}">
                            <div id="rpt001" data-highcharts-chart="1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="dashboard02"></div>
        </div>
    </div>
</div>
</body>
</html>